<template>
  <div class="configForm">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="配置名称" prop="name">
        <el-input v-model.number="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="最低温度" prop="low_temp">
        <el-input v-model.number="ruleForm.low_temp"></el-input>
      </el-form-item>
      <el-form-item label="最高温度" prop="temperature">
        <el-input v-model.number="ruleForm.temperature"></el-input>
      </el-form-item>
      <el-form-item label="温度监测启动时间" required>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.tem_start_time"
              value-format="HH:mm:ss"
              placeholder="开始时间">
          </el-time-picker>
        </el-col>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.tem_end_time"
              value-format="HH:mm:ss"
              placeholder="结束时间">
          </el-time-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="火焰预警值" prop="fire">
        <el-input v-model.number="ruleForm.fire"></el-input>
      </el-form-item>
      <el-form-item label="火警等级" prop="fire_grade">
        <el-select v-model="ruleForm.region" placeholder="请选择火警等级">
          <el-option label="低" value="1"></el-option>
          <el-option label="高" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="火焰监测启动时间" required>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.fire_start_time"
              value-format="HH:mm:ss"
              placeholder="开始时间">
          </el-time-picker>
        </el-col>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.fire_end_time"
              value-format="HH:mm:ss"
              placeholder="借宿时间">
          </el-time-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="烟雾预警值" prop="smoke">
        <el-input v-model.number="ruleForm.smoke"></el-input>
      </el-form-item>
      <el-form-item label="烟雾监测启动时间" required>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.smoke_start_time"
              value-format="HH:mm:ss"
              placeholder="开始时间">
          </el-time-picker>
        </el-col>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.smoke_end_time"
              value-format="HH:mm:ss"
              placeholder="结束时间">
          </el-time-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="是否启动光敏" prop="is_light">
        <el-switch v-model="ruleForm.is_light"></el-switch>
      </el-form-item>
      <el-form-item label="光敏预警值" prop="light">
        <el-input v-model.number="ruleForm.light"></el-input>
      </el-form-item>
      <el-form-item label="光敏监测启动时间" required>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.light_start_time"
              value-format="HH:mm:ss"
              placeholder="开始时间">
          </el-time-picker>
        </el-col>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.light_end_time"
              value-format="HH:mm:ss"
              placeholder="结束时间">
          </el-time-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="是否启动抓拍" prop="is_camera">
        <el-switch v-model="ruleForm.is_camera"></el-switch>
      </el-form-item>
      <el-form-item label="抓拍启动时间" required>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.camera_start_time"
              value-format="HH:mm:ss"
              placeholder="开始时间">
          </el-time-picker>
        </el-col>
        <el-col :span="11">
          <el-time-picker
              v-model="ruleForm.camera_end_time"
              value-format="HH:mm:ss"
              placeholder="结束时间">
          </el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">{{ comfireTitle }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {sendChangeConfig, showMessage} from "@/utils/displayUtils";
import {getDateFormat} from "@/utils/formatDateUtils";
import {mapGetters} from "vuex";

export default {
  name: "configDetail",
  props:{
    configDetail: Object,
    option: {
      validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['add', 'edit'].includes(value)
      }
    }
  },
  computed: {
    ...mapGetters(['loginStatus','username','password','email','roleId','uid'])
  },
  data() {
    return {
      comfireTitle: '修改',
      ruleForm: {},
      ruleFormSimple: {
        sid: 0,
        name: '配置一',
        is_now: true,
        temperature: '',
        low_temp: '',
        tem_start_time: null,
        tem_end_time: null,
        fire: null,
        fire_start_time: null,
        fire_end_time: null,
        smoke: null,
        smoke_start_time: null,
        smoke_end_time: null,
        fire_grade: null,
        is_light: true,
        light: null,
        light_start_time: null,
        light_end_time: null,
        is_camera: null,
        camera_start_time:null,
        camera_end_time: null
      },
      rules: {
        name: [
          { required: true, message: '请输入配置名称', trigger: 'blur' },
        ],
        temperature: [
          { required: true, message: '请输入预警值', trigger: 'blur' },
          { type: 'number', message: '预警值必须为数字值'}
        ],
        low_temp: [
          { required: true, message: '请输入预警值', trigger: 'blur' },
          { type: 'number', message: '预警值必须为数字值'}
        ],
        tem_start_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        tem_end_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        fire: [
          { required: true, message: '请输入预警值', trigger: 'blur' },
          { type: 'number', message: '预警值必须为数字值', trigger: 'blur' }
        ],
        fire_start_time: [
          {  required: true, message: '请选择日期', trigger: 'change' }
        ],
        fire_end_time: [
          {  required: true, message: '请选择日期', trigger: 'change' }
        ],
        smoke: [
          { required: true, message: '请输入预警值', trigger: 'blur' },
          { type: 'number', message: '预警值必须为数字值', trigger: 'blur' }
        ],
        smoke_start_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        smoke_end_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        light: [
          { required: true, message: '请输入预警值', trigger: 'blur' },
          { type: 'number', message: '预警值必须为数字值', trigger: 'blur' }
        ],
        light_start_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        light_end_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        camera_start_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        camera_end_time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
    }
  },
  mounted() {
    if (this.option === 'add') {
      console.log('新增')
      this.ruleForm = this.ruleFormSimple
      this.comfireTitle = '新增'
    } else {
      console.log('修改')
      this.ruleForm = this.configDetail
      this.comfireTitle = '修改'
    }
    console.log(this.ruleForm)
    // this.ruleForm.tem_start_time = new Date(2022,12,12,this.ruleForm.tem_start_time.slice(0,2))
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // todo 调用配置更新或新增api
          // alert('配置完成!');
          console.log(this.ruleForm)
          let option = {
            uid:this.uid,
            sid:this.ruleForm.sid,
            name:this.ruleForm.name,
            is_now:this.ruleForm.is_now,
            temperature:this.ruleForm.temperature,
            low_temp:this.ruleForm.low_temp,
            tem_start_time:this.ruleForm.tem_start_time,
            tem_end_time:this.ruleForm.tem_end_time,
            fire:this.ruleForm.fire,
            fire_start_time:this.ruleForm.fire_start_time,
            fire_end_time:this.ruleForm.fire_end_time,
            smoke:this.ruleForm.smoke,
            smoke_start_time:this.ruleForm.smoke_start_time,
            smoke_end_time:this.ruleForm.smoke_end_time,
            fire_grade:this.ruleForm.fire_grade,
            is_light:this.ruleForm.is_light,
            light:this.ruleForm.light,
            light_start_time:this.ruleForm.light_start_time,
            light_end_time:this.ruleForm.light_end_time,
            is_camera:this.ruleForm.is_camera,
            camera_start_time:this.ruleForm.camera_start_time,
            camera_end_time:this.ruleForm.camera_end_time,
          }
          if (this.option == 'add'){
            sendChangeConfig(option).then((data) => {
              if (data.code == '200') {
                showMessage(this,data.msg,'success')
                this.$emit('complete',{class: 'add', item: this.ruleForm})
              }else {
                showMessage(this,data.msg,'warning')
              }
            })
          } else {
            sendChangeConfig(option).then((data) => {
              if (data.code == '200') {
                showMessage(this,data.msg,'success')
                this.$emit('complete',{class: 'edit', item: this.ruleForm})
              }else {
                showMessage(this,data.msg,'warning')
              }
            })
          }
        } else {
          console.log('提交错误!!');
          showMessage(this,'提交错误！','warning')
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // cancel(){
    //   this.$emit('cancelConfig', false)
    // }
  }
}
</script>

<style scoped>

</style>
